<route lang="json5" type="page">
  {
    layout: 'default',
    style: {
      navigationBarTitleText: '我的课表',
    },
    anonymous: false
  }
</route>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { useUserStore } from '@/stores'
import { ScheduleApi } from '@/apis'
import { loginRoute } from '@/interceptors/route'
import Avatar from '@/static/images/avatar/unknown.png'

const userStore = useUserStore()
const studentId = computed(() => userStore.currentStudent.id)

onShow(() => {
  if (!userStore.isLogin()) {
    uni.navigateTo({ url: loginRoute })
  }
})

const selectedDate = ref(dayjs().format('YYYY-MM-DD'))
const lessonList = ref<ScheduleApi.ScheduleLesson[]>([])
const lessonStat = reactive({
  totalLessonCount: 0,
  completedLessonCount: 0,
},
)
const lessonDateMap = ref<Record<string, ScheduleApi.ScheduleLesson[]>>({})
const lessonDateList = computed(() => Object.keys(lessonDateMap.value) || [])
const selectedDateLessonList = computed(() => (lessonDateMap.value[selectedDate.value] || []).sort((a, b) => a.startTime.localeCompare(b.startTime)))

const getScheduleLessonList = async () => {
  const date = dayjs(selectedDate.value)
  const query: ScheduleApi.ScheduleLessonQuery = {
    lessonDateFrom: date.startOf('month').format('YYYY-MM-DD'),
    lessonDateTo: date.endOf('month').format('YYYY-MM-DD'),
    studentId: studentId.value,
  }
  lessonList.value = await ScheduleApi.getScheduleLessonList(query)

  lessonStat.totalLessonCount = lessonList.value.length
  lessonStat.completedLessonCount = 0
  lessonDateMap.value = {}
  for (const item of lessonList.value) {
    if (item.lessonStudent.signInStatus) {
      lessonStat.completedLessonCount += 1
    }
    if (lessonDateMap.value[item.lessonDate]) {
      lessonDateMap.value[item.lessonDate].push(item)
    } else {
      lessonDateMap.value[item.lessonDate] = [item]
    }
  }
}

const onDateChange = (e) => {
  const selectedMonth = dayjs(selectedDate.value).format('YYYY-MM')
  selectedDate.value = e.fulldate
  if (selectedMonth !== dayjs(e.fulldate).format('YYYY-MM')) {
    getScheduleLessonList()
  }
}

const selectedDateStr = computed(() => {
  return dayjs(selectedDate.value).format('M月D日')
})
onLoad(() => {
  getScheduleLessonList()
})
</script>

<template>
  <view class="tab-page">
    <view class="box bg-white">
      <lx-calendar :value="selectedDate" :dot_lists="lessonDateList" :expanded="true" @change="onDateChange">
        <template #right>
          当月已上 {{ lessonStat.completedLessonCount }}/{{ lessonStat.totalLessonCount }}
        </template>
      </lx-calendar>
    </view>

    <view class="my px">
      <view class="flex-row-between-center">
        <text class="text-18px fw-500 leading-24px text-main">
          {{ selectedDateStr }}课表
        </text>
        <text class="text-14px leading-20px text-secondary">
          共{{ selectedDateLessonList.length }}节
        </text>
      </view>

      <view
        v-for="(item, index) in selectedDateLessonList"
        :key="index"
        class="mt-24rpx gap-16rpx rounded-2 bg-white px-32rpx py-24rpx"
      >
        <view class="mb-1 w-full flex-row-between-center">
          <view class="flex-row-start-center">
            <view class="text-44rpx font-500 text-main">
              {{ item.startTime }} - {{ item.endTime }}
            </view>
            <view class="ml-1">
              <wd-button type="text">
                {{ item.title }}
              </wd-button>
            </view>
          </view>
          <view class="">
            <wd-tag v-if="item.lessonStudent.signInStatus" type="primary">
              已出勤
            </wd-tag>
            <wd-tag v-else type="warning">
              待上课
            </wd-tag>
          </view>
        </view>
        <view class="w-full flex-y gap-4px text-24rpx text-secondary">
          <text>
            {{ item.className }}
          </text>
          <view class="w-full flex-row-between-center">
            <text>{{ item.campusName }}·{{ item.classroomName }}</text>
            <view class="flex-row-end-center">
              <wd-img width="48rpx" height="48rpx" round :src="Avatar" />
              <text class="ml-1">
                {{ item.leadTeacherName }}老师
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="!selectedDateLessonList.length">
      <wd-status-tip image="content" tip="暂无排课" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
</style>
